import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Input, Button, Text, Image } from "@tarojs/components-rn";
import { observer, inject } from "@tarojs/mobx-rn";
import register_step_oneStyleSheet from "./register_step_one_styles";
import { getRuntime, isPhone } from "../../utils/common";
import eye_on from "../../assets/img/icon_01_on.png";
import eye from "../../assets/img/icon_01.png";
import check from "../../assets/img/icon_64.png";
import check_on from "../../assets/img/icon_64_on.png";
var _styleSheet = register_step_oneStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let RegisterStepOne = class RegisterStepOne extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phoneNumber: '',
      smsCode: '',
      currentEye: false,
      currentCenterEye: false,
      eyeImg: eye,
      eyeCenterImg: eye,
      password: null,
      passwordCenter: null,
      passwordType: 'password',
      passwordCenterType: 'password',
      invitationCode: 4,
      focus: 'phoneNumber',
      isComplete: true,
      getCodeText: '获取验证码',
      btnCodeStatus: false,
      isAgree: false
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '新用户注册' });
    let invitationCode = this.$router.params.invitationCode;
    if (invitationCode) {
      this.setState({ invitationCode });
    }
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  getCode() {
    let { phoneNumber, btnCodeStatus } = this.state;
    if (typeof btnCodeStatus === 'number') return;
    if (!phoneNumber) {
      getRuntime().showToast('请填写手机号~');
      return false;
    }
    if (!isPhone) {
      getRuntime().showToast('请填写11位手机号码~');
      return false;
    }
    this.countDown();
    let { userStore } = this.props.stores;
    userStore.getSmsCode({
      form: {
        phoneNumber: phoneNumber
      }, callback: () => {
        getRuntime().showToast('验证码发送成功, 请注意查收~');
      }
    });
  }
  // 验证码倒计时
  countDown() {
    let getCodeText = 60;
    let timer = setInterval(() => {
      getCodeText--;
      if (getCodeText === 0) {
        clearInterval(timer);
        this.setState({
          getCodeText: '获取验证码',
          btnCodeStatus: false
        });
      } else {
        this.setState({
          getCodeText: getCodeText + 's',
          btnCodeStatus: true
        });
      }
    }, 1000);
  }
  // input聚焦
  inputFocus(type = 'phoneNumber') {
    this.setState({
      focus: type
    });
  }
  inputChange(type, e) {
    let value = e.target.value;
    if (type === 'invitationCode') {
      // 去掉占位符0
      let ind = 0;
      for (let i in value) {
        if (value.charAt(i) > 0) {
          ind = i;
          break;
        }
      }
      value = value.substr(ind);
    }
    this.setState({
      [type]: value
    }, () => {
      let { phoneNumber, smsCode, password, passwordCenter } = this.state;
      if (phoneNumber && smsCode && password && passwordCenter) {
        this.setState({
          isComplete: false
        });
      } else {
        this.setState({
          isComplete: true
        });
      }
    });
  }
  toggleEye() {
    this.setState({
      currentEye: !this.state.currentEye
    }, () => {
      let eyeImg = this.state.currentEye ? eye_on : eye;
      let passwordType = this.state.currentEye ? 'text' : 'password';
      this.setState({
        eyeImg,
        passwordType
      });
    });
  }
  toggleCenterEye() {
    this.setState({
      currentCenterEye: !this.state.currentCenterEye
    }, () => {
      let eyeCenterImg = this.state.currentCenterEye ? eye_on : eye;
      let passwordCenterType = this.state.currentCenterEye ? 'text' : 'password';
      this.setState({
        eyeCenterImg,
        passwordCenterType
      });
    });
  }
  setAgree() {
    this.setState({ isAgree: !this.state.isAgree });
  }
  formSubmit() {
    let { phoneNumber, smsCode, password, passwordCenter, invitationCode, isAgree } = this.state;
    if (!phoneNumber) {
      getRuntime().showToast('请填写手机号~');
      return false;
    }
    if (!smsCode) {
      getRuntime().showToast('请填写验证码~');
      return false;
    }
    if (!password) {
      getRuntime().showToast('请填写密码~');
      return false;
    }
    if (password !== passwordCenter) {
      getRuntime().showToast('两次输入密码不一致~');
      return false;
    }
    if (!isAgree) {
      getRuntime().showToast('请阅读并勾选用户注册服务协议~');
      return false;
    }
    const { stores: { userStore } } = this.props;
    userStore.registerStepOneF({
      form: {
        sourceUserId: invitationCode,
        phoneNumber,
        password,
        smsCode
      },
      callback: () => {
        // 缓存invitationCode
        getRuntime().setStorage('fatherUserId', invitationCode);
        getRuntime().showToast('恭喜您注册成功,请前往登录~');
        setTimeout(() => {
          getRuntime().navigateTo('/pages/login/login?fatherUserId=' + invitationCode);
        }, 2000);
      }
    });
  }
  render() {
    let { focus, isComplete, getCodeText, btnCodeStatus, passwordType, passwordCenterType, eyeImg, eyeCenterImg, invitationCode, isAgree } = this.state;
    return <View style={_styleSheet["login-wrap"]}>
       <View>
         <Text style={_styleSheet["title"]}>欢迎您注册建务通</Text>
           <View style={_getStyle(focus === 'phoneNumber' ? 'input-group input-group-on' : 'input-group')}>
             <Text style={_styleSheet["input-title"]}>手机号</Text>
             <Input type="number" name="phoneNumber" placeholderClass="placeholder-class" placeholder="请输入11位手机号" maxLenght="11" onFocus={this.inputFocus.bind(this, 'phoneNumber')} onChange={this.inputChange.bind(this, 'phoneNumber')} style={_styleSheet["input"]} />
           </View>
           <View style={_getStyle(focus === 'smsCode' ? 'input-group input-group-on' : 'input-group')}>
             <Text style={_styleSheet["input-title"]}>验证码</Text>
             <Input type="text" name="smsCode" placeholderClass="placeholder-class" placeholder="请输入验证码" onFocus={this.inputFocus.bind(this, 'smsCode')} onChange={this.inputChange.bind(this, 'smsCode')} style={_styleSheet["input"]} />
             <Button onClick={this.getCode.bind(this)} type={"default"} disabled={btnCodeStatus} style={_styleSheet["get-code"]}>{getCodeText}</Button>
           </View>

           <View style={_getStyle(focus === 'password' ? 'input-group input-group-on' : 'input-group')}>
             <Text style={_styleSheet["input-title"]}>密码</Text>
             <Input placeholderClass="placeholder-class" placeholder="请输入登录密码" type={passwordType} name="password" onFocus={this.inputFocus.bind(this, 'password')} onChange={this.inputChange.bind(this, 'password')} style={_styleSheet["input"]} />
             <Image src={eyeImg} onClick={this.toggleEye.bind(this)} style={_styleSheet["eye"]} />
           </View>
           <View style={_getStyle(focus === 'passwordCenter' ? 'input-group input-group-on' : 'input-group')}>
             <Text style={_styleSheet["input-title"]}>确认密码</Text>
             <Input placeholderClass="placeholder-class" placeholder="请输入登录密码" type={passwordCenterType} name="password" onFocus={this.inputFocus.bind(this, 'passwordCenter')} onChange={this.inputChange.bind(this, 'passwordCenter')} style={_styleSheet["input"]} />
             <Image src={eyeCenterImg} onClick={this.toggleCenterEye.bind(this)} style={_styleSheet["eye"]} />
           </View>
           <View style={[_getStyle(focus === 'invitationCode' ? 'input-group input-group-on' : 'input-group'), { display: 'none' }]}>
             <Text style={_styleSheet["input-title"]}>邀请码</Text>
             <Input placeholderClass="placeholder-class" placeholder="请输入邀请码(选填)" type="text" value={invitationCode} name="invitationCode" disabled={true} onFocus={this.inputFocus.bind(this, 'invitationCode')} onChange={this.inputChange.bind(this, 'invitationCode')} style={_styleSheet["input"]} />
           </View>
           <Button type="primary" disabled={isComplete} onClick={this.formSubmit.bind(this)} style={_getStyle(isComplete ? 'btn-submit' : 'btn-submit  btn-submit-on')}>立即注册</Button>
       </View>

        <View style={_styleSheet["protocol"]}>
          {!isAgree && <Image src={check} onClick={this.setAgree.bind(this)} style={_styleSheet["icon-check"]} />}
          {isAgree && <Image src={check_on} onClick={this.setAgree.bind(this)} style={_styleSheet["icon-check"]} />}
          <View onClick={this.handelRouter.bind(this, '/pages/other/regist_agreement')} style={_styleSheet["protocol-text"]}>《建务通服务协议》</View>
          <View style={_styleSheet["split"]}>|</View>
          <View onClick={this.handelRouter.bind(this, '/pages/login/login')} style={_styleSheet["protocol-text"]}> 前往登录</View>
        </View>
      </View>;
  }
};
RegisterStepOne = tslib_1.__decorate([inject("stores"), observer], RegisterStepOne);
export default RegisterStepOne;